<!-- 页面的部分要在template标记 -->
<template>
  <div class="main"> 我的第一个vue项目 </div>
  <div>{{ title }}</div>
  <hr />
  <div>{{ user }}</div>
  <div>
    用户名：<input type="text" v-model="user.username" />
    <br />
    密码：<input type="password" v-model="user.password" />
    <br />
    <button @click="login">测试</button>
  </div>
  <hr>

  <table border="1">

    <thead>
      <tr>
        <th>编号</th>
        <th>姓名</th>
      </tr>
    </thead>

    <tbody>
      <tr v-for="d in list">
        <td>{{ d.id }}</td>
        <td>{{ d.name }}</td>
      </tr>
    </tbody>

    
  </table>


</template>

<script setup>
import { ref } from 'vue';

const title = ref('vue你好');

const user = ref({
  username: '',
  password: '',
});

const login = () => {
  alert(JSON.stringify(user.value));
};

const list = ref([
  { id: 100, name: '张三' },
  { id: 101, name: '李四' },
  { id: 102, name: '王五' },
]);
</script>

<!-- 页面的样式写在style标记里面 -->
<style scoped>
.main {
  text-align: center;
}
</style>

